<template>
	<view class="">
		<view class="indexhed bg-white padding-lr">
			<view class=" flex justify-between margin-tb align-center">
				<!-- 查询工单头部 -->
				<template v-if="listName==='查询工单'">
					<view class="" style="width: 80%;">
						<u-search height="40" placeholder="请输入工单号" v-model="listQuery.orderCode" searchIcon="scan"
							:clearabled="true" :showAction="false" @clickIcon="takeScan('order')"></u-search>
					</view>
					<view class="margin-left-sm" style="width: 20%;">
						<u-button type="success" :plain='true' size="small" shape="circle" class="btn"
							@tap="getList(1500, 'getOrder')">搜索</u-button>
					</view>
				</template>
				<!-- 查询产品，物料 头部-->
				<template v-else>
					<text class="text-666 text-xxl font-shadow margin-right">请扫描序列号:</text>
					<uni-icons type="scan" color="#ccc" size="25" @tap="takeScan(listName==='查询产品'?'product':'bom')">
					</uni-icons>
				</template>
			</view>
		</view>
		<!-- 工单查询的列表 -->
		<view v-if="listName==='查询工单'" class="bg padding-lr padding-bottom-sm margin-top margin-lr">
			<view class="flex justify-between" v-for="(item, index) in orderList" :key="index">
				<view class="padding-lr-sm padding-top-sm text-666">
					{{item.name}}
				</view>
				<view class="padding-lr-sm padding-top-sm text-blue">
					{{item.value || '-'}}
				</view>
			</view>
		</view>
		<!-- 产品查询列表 -->
		<view v-else-if="listName==='查询产品'" class="bg padding-lr padding-bottom-sm margin-top margin-lr">
			<view class="flex justify-between" v-for="(item, index) in productList" :key="index">
				<view class="padding-lr-sm padding-top-sm text-666">
					{{item.name}}
				</view>
				<view class="padding-lr-sm padding-top-sm text-blue">
					{{item.value || '-'}}
				</view>
			</view>
		</view>
		<!-- 物料查询列表 -->
		<view v-else class="bg padding-lr padding-bottom-sm margin-top margin-lr" v-for="(item, index) in bomList"
			:key="index">
			<view class="flex justify-between">
				<view class="padding-lr-sm padding-top-sm text-666">
					生产码
				</view>
				<view class="padding-lr-sm padding-top-sm text-blue">
					{{item.part.productId || '-'}}
				</view>
			</view>
			<view class="flex justify-between">
				<view class="padding-lr-sm padding-top-sm text-666">
					线号
				</view>
				<view class="padding-lr-sm padding-top-sm text-blue">
					{{item.part.lineNumber || '-'}}
				</view>
			</view>
			<view class="flex justify-between">
				<view class="padding-lr-sm padding-top-sm text-666">
					工站号
				</view>
				<view class="padding-lr-sm padding-top-sm text-blue">
					{{item.part.stationNumber || '-'}}
				</view>
			</view>
			<!-- 点击展开部分 -->
			<template v-if="item.flag">
				<view class="">
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							工艺号
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.part.processNumber || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							物料名称
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomName || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							物料代号
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomCode || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							物料值
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomValue || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							批次号
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomLot || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							物料数量
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomQty || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							测试时间
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.testTime || '-'}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="padding-lr-sm padding-top-sm text-666">
							物料状态
						</view>
						<view class="padding-lr-sm padding-top-sm text-blue">
							{{item.bomState || '-'}}
						</view>
					</view>
					<view class="flex columns justify-center align-center text-999" @tap="collBox(index)">
						<u-icon name="arrow-up" color="#999"></u-icon>
						<text>收起</text>
					</view>
				</view>
			</template>
			<!-- 点击展开按钮 -->
			<template v-else>
				<view class="flex columns justify-center align-center text-999" @tap="collBox(index)">
					<u-icon name="arrow-down" color="#999"></u-icon>
					<text>展开</text>
				</view>
			</template>
		</view>
		<view class="text-center margin-top-xxl text-666" v-if="flag">
			------暂无更多数据------
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				flag: false,
				listName: '',
				listQuery: {
					endTime: "",
					limit: 20,
					lineNumber: "",
					orderCode: "",
					productId: '',
					lotId: '',
					page: 1,
					sort: "+due_date",
					startTime: "",
					state: 0,
					typeNo: ""
				},
				// 订单数据
				orderList: [{
						name: '订单代号',
						value: "",
					}, {
						name: '工单名称',
						value: "",
					}, {
						name: '工单状态',
						value: "",
					}, {
						name: '单位',
						value: "",
					}, {
						name: '订单数量',
						value: "",
					},
					{
						name: '实际完成数量',
						value: "",
					}, {
						name: '计划开始',
						value: "",
					}, {
						name: '计划结束',
						value: "",
					}, {
						name: '线名',
						value: "",
					}, {
						name: '型号代码',
						value: "",
					}, {
						name: '负责人',
						value: "",
					}, {
						name: '创建时间',
						value: "",
					}, {
						name: '产品描述',
						value: "",
					}, {
						name: '图号版本',
						value: "",
					}, {
						name: 'BOM编码',
						value: "",
					}, {
						name: 'BOM版本',
						value: "",
					}, {
						name: '工艺路线',
						value: "",
					}, {
						name: '工艺路线版本',
						value: "",
					}, {
						name: '场景代码',
						value: "",
					}, {
						name: '客户订单号',
						value: "",
					}, {
						name: '客户订单行',
						value: "",
					}, {
						name: '产品部门',
						value: "",
					}
				],
				// 产品数据
				productList: [{
					name: 'Lot号',
					value: "",
				}, {
					name: '订单代号',
					value: "",
				}, {
					name: 'LOT状态',
					value: "",
				}, {
					name: 'LOT描述',
					value: "",
				}, {
					name: '序列号',
					value: "",
				}, {
					name: '生产优先级',
					value: "",
				}, {
					name: 'LOT类型',
					value: "",
				}, {
					name: '当前工艺',
					value: "",
				}, {
					name: '数量',
					value: "",
				}, {
					name: '客户组装序列号',
					value: "",
				}, {
					name: '创建时间',
					value: "",
				}],
				// 物料数据
				bomList: [{
					bomCode: "",
					bomName: "",
					bomValue: "",
					bomLot: "",
					bomQty: '',
					bomState: '',
					testTime: "",
					part:{
						productSn: '',
						productId: 0,
						lineNumber: '',
						stationNumber: '',
						processNumber: '',
					}	
				}]
			}
		},
		// 页面传参
		onLoad: function(options) {
			this.listName = options.name;
			this.bomList.forEach(i => {
				i.flag = false
			});
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.listName
			});
		},
		onReachBottom() {
			if (this.bomList.length < this.total)
				return this.flag = true
			this.listQuery.page++
			this.getList()
		},
		methods: {
			// 打开相机
			takeScan(code) {
				// 	// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						if (code == 'order') {
							this.listQuery.orderCode = res.result
							this.getList(1500, 'getOrder')
						} else if (code == 'product') {
							this.listQuery.lotId = res.result
							this.getList(1520, 'getOrder')
						} else {
							this.listQuery.productId = res.result
							this.getList(920, 'getBom')
						}
					}
				});
			},
			// 点击展开收起
			collBox(index) {
				this.bomList[index].flag = !this.bomList[index].flag;
				this.$forceUpdate();
			},
			// 请求列表
			getList(eventId, event) {
				if (eventId === 1500 || eventId === 1520) this.listQuery.page = 1
				let params = {
					para: this.listQuery,
					eventId: eventId,
					userName: 'administrator'
				}
				let api = this.$appApi.getApi(event, params);
				this.$tools.request(
					api,
					res => {
						if (eventId === 1500) {
							let datas = res.orders[0]
							this.orderList[0].value = datas.orderCode;
							this.orderList[1].value = datas.orderName;
							this.orderList[2].value = datas.orderStatus;
							this.orderList[3].value = datas.orderUnit;
							this.orderList[4].value = datas.orderNumber;
							this.orderList[5].value = datas.actualNumber;
							this.orderList[6].value = datas.planStart;
							this.orderList[7].value = datas.planEnd;
							this.orderList[8].value = datas.lineNumber;
							this.orderList[9].value = datas.typeNo;
							this.orderList[10].value = datas.manager;
							this.orderList[11].value = datas.creatTime;
							this.orderList[12].value = datas.matDesc;
							this.orderList[13].value = datas.matVer;
							this.orderList[14].value = datas.bomSetId;
							this.orderList[15].value = datas.bomSetVersion;
							this.orderList[16].value = datas.processingNumber;
							this.orderList[17].value = datas.processingVer;
							this.orderList[18].value = datas.cjcode;
							this.orderList[19].value = datas.cusSo;
							this.orderList[20].value = datas.cusSoItem;
						} else if (eventId === 1520) {
							let datas = res.lots[0]
							this.productList[0].value = datas.lotId;
							this.productList[1].value = datas.orderCode;
							this.productList[2].value = datas.lotStatus;
							this.productList[3].value = datas.lotDesc;
							this.productList[4].value = datas.subLotId;
							this.productList[5].value = datas.lotPriority;
							this.productList[6].value = datas.lotType;
							this.productList[7].value = datas.oper;
							this.productList[8].value = datas.qty;
							this.productList[9].value = datas.customerSn;
							this.productList[10].value = datas.customerSnCreateTime;
						} else {
							// if(this.listQuery.page === 1) this.bomList = []
							this.bomList = [...this.bomList, ...res.bomResults];
							this.total = res.total
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexhed {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.font-shadow {
		text-shadow: 5rpx 5rpx 5rpx gainsboro;
	}

	.bg {
		background-image: url(/static/bg.png);
		background-repeat: no-repeat;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.btn {
		width: 100rpx;
	}

	.columns {
		flex-direction: column;
	}

	.active {
		height: 200rpx;
		overflow: hidden;
	}
</style>
